<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>商品详情</title>
        <link rel="stylesheet" href="css/reset.css">
        <link rel="stylesheet" href="css/goodsdetail.css">
        <!-- <link rel="stylesheet" href="http://at.alicdn.com/t/font_2367458_jotdwk49nfi.css"> -->
        <link rel="stylesheet" href="http://at.alicdn.com/t/font_2367458_0c0z3dmzrfz8.css">
    </head>
    <body>
        <header>
            <div class="wrapper">
                <div class="haier-logo">
                    <a href="index.html"><img src="assets/images/haier2020_logo.png" alt=""></a>
                </div>
                <ul class="clear">
                    <li>
                        智能家庭
                        <ul class="hidbox">
                            <li>
                                <a href="">智慧首页</a>
                            </li>
                            <li>
                                <a href="">智慧方案</a>
                            </li>
                            <li>
                                <a href="">智慧家电</a>
                            </li>
                            <li>
                                <a href="">生活资讯</a>
                            </li>
                            <li>
                                <a href="">智慧体验店</a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        个人与家用产品
                        <ul class="hidbox">
                            <li>
                                <a href="">智慧首页</a>
                            </li>
                            <li>
                                <a href="">智慧方案</a>
                            </li>
                            <li>
                                <a href="">智慧家电</a>
                            </li>
                            <li>
                                <a href="">生活资讯</a>
                            </li>
                            <li>
                                <a href="">智慧体验店</a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        商用解决方案
                        <ul class="hidbox">
                            <li>
                                <a href="">智慧首页</a>
                            </li>
                            <li>
                                <a href="">智慧方案</a>
                            </li>
                            <li>
                                <a href="">智慧家电</a>
                            </li>
                            <li>
                                <a href="">生活资讯</a>
                            </li>
                            <li>
                                <a href="">智慧体验店</a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        购买与服务
                        <ul class="hidbox">
                            <li>
                                <a href="aftersale.html">服务支持</a>
                            </li>
                            <li>
                                <a href="">智慧方案</a>
                            </li>
                            <li>
                                <a href="">智慧家电</a>
                            </li>
                            <li>
                                <a href="">生活资讯</a>
                            </li>
                            <li>
                                <a href="">智慧体验店</a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        关于海尔
                        <ul class="hidbox">
                            <li>
                                <a href="">智慧首页</a>
                            </li>
                            <li>
                                <a href="">智慧方案</a>
                            </li>
                            <li>
                                <a href="">智慧家电</a>
                            </li>
                            <li>
                                <a href="">生活资讯</a>
                            </li>
                            <li>
                                <a href="">智慧体验店</a>
                            </li>
                        </ul>
                    </li>
                </ul>
                <div class="search-box">
                        <div class="search-item">
                            <i class="iconfont icon-fangdajing"></i>
                            <input type="text" placeholder="找点什么... ">
                        </div>
                        <a href="#"><i class="iconfont icon-gouwuche"></i></a>
                        <a href="sign.html"><i class="iconfont icon-yonghu-user"></i></a>
                </div> 
            </div>
    </header>

        <section class="product-detail">
            <!-- 产品预览 -->
            <div class="top">
                <div class="top-content">
                    <p class="top-text">
                        <a href="#">首页</a>
                        <i>></i>
                        <a href="">冰箱</a>
                        <i>></i>
                        <span>BCD-570WLHSS17B2U1</span>
                    </p>
                    <div class="content-left">
                        <div class="content-img">
                            <img src="assets/images/bingxiang.png" alt="">
                        </div>

                        <div class="product-preview">
                            <i class="iconfont icon-arrow-left"></i>
                            <ul>
                                <li>
                                    <img src="assets/images/xiaobingxiang.png" alt="">
                                </li>
                                <li>
                                    <img src="assets/images/x2.png" alt="">
                                </li>
                                <li>
                                    <img src="assets/images/x3.png" alt="">
                                </li>
                                <li>
                                    <img src="assets/images/x4.png" alt="">
                                </li>
                                <li>
                                    <img src="assets/images/x5.png" alt="">
                                </li>
                            </ul>
                            <i class="iconfont icon-zuoyoujiantou-copy-copy"></i>
                        </div>
                    </div>
                    <div class="content-right">
                        <h1>570升风冷变频多门冰箱</h1>
                        <p class="english">BCD-570WLHSS17B2U1</p>
                        <span>参考价</span>&nbsp;&nbsp;<i>￥</i><span>8999</span>
                        
                        <div class="att">
                            <i class="iconfont icon-zhuyi"></i>
                            <p>具体成交价格根据商品参加活动或会员使用优惠券、积分等发生变化，最终以各渠道订单结算页价格为准</p>
                        </div>

                        <div class="purchase">
                            <button>在线购买</button>
                            <i class="iconfont icon-qr_code"></i>
                            <span>手机查看</span>
                            <p>看看相似产品></p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 产品介绍 -->
            <div class="intro">
                <!-- 产品列表 -->
                <div class="intro-list">
                <ul class="clear">
                    <li>产品介绍</li>
                    <li>规格参数</li>
                    <li>用户口碑</li>
                    <li>服务支持</li>
                </ul>
                </div>

                <!-- 功能说明 -->
                <div class="intro-func">
                <div class="func-top">
                    <div class="func-text">
                        <p>箱门结构</p>
                        <h1>多门</h1>
                    </div>
                    <div class="func-text">
                        <p>箱门结构</p>
                        <h1>多门</h1>
                    </div>
                    <div class="func-text">
                        <p>箱门结构</p>
                        <h1>多门</h1>
                    </div>
                    <div class="func-text">
                        <p>箱门结构</p>
                        <h1>多门</h1>
                    </div>
                </div>
                <div class="func-bottom">
                    <div class="func-text">
                        <img src="assets/images/maisui1.png" alt="">
                        <h1>臻彩晶釉蓝</h1>
                    </div>
                    <div class="func-text">
                        <img src="assets/images/maisui1.png" alt="">
                        <h1>臻彩晶釉蓝</h1>
                    </div>
                    <div class="func-text">
                        <img src="assets/images/maisui1.png" alt="">
                        <h1>臻彩晶釉蓝</h1>
                    </div>
                    <div class="func-text">
                        <img src="assets/images/maisui1.png" alt="">
                        <h1>臻彩晶釉蓝</h1>
                    </div>
                </div>
                
                </div>
            </div>

            <!-- 分类展示 -->
            <div class="show">
                <div class="show_one">
                    <div class="show-wrapper">
                        <div class="show-text">
                            <h1>
                                臻彩晶釉蓝<br>灵动光影
                            </h1>
                            <p>
                                汲取景泰蓝珐琅釉灵感，打造智慧科技的蓝色釉彩，深邃神秘不显沉闷，光与影的结合，彰显令人沉浸的视觉魅力。
                            </p>
                        </div>
                        <div class="show-img">
                            <img src="assets/images/show1.png" alt="">
                        </div>
                    </div>
                </div>
    
                <div class="show_two">
                    <div class="mask">

                    </div>
                    <div class="show-wrapper">
                        <div class="show-img">
                            <div class="bg"></div>
                            <img src="assets/images/show2.png" alt="">
                        </div>
                        <div class="show-text">
                            <h1>
                                臻彩晶釉蓝<br>灵动光影
                            </h1>
                            <p>
                               
                                果蔬、珍品分区储存，水果蔬菜也能分储，鲜润加倍，干区久存不易返潮，营养如初。
                            </p>
                        </div>
                    </div>
                </div>

                <div class="show_three">
                    <div class="show-wrapper">
                        <div class="show-text">
                            <h1>
                                臻彩晶釉蓝<br>灵动光影
                            </h1>
                            <p>
                                汲取景泰蓝珐琅釉灵感，打造智慧科技的蓝色釉彩，深邃神秘不显沉闷，光与影的结合，彰显令人沉浸的视觉魅力。
                            </p>
                        </div>
                        <div class="show-img">
                            <div class="bg">

                            </div>
                            <img src="assets/images/show3.png" alt="">
                        </div>
                    </div>
                </div>

                <div class="show_four">
                    <div class="show-wrapper">
                        <div class="show-img">
                            <img src="assets/images/show4.png" alt="">
                        </div>
                        <div class="show-text">
                            <div class="bg">

                            </div>
                            <h1>
                                双系统制冷
                            </h1>
                            <p>
                               
                                果蔬、珍品分区储存，水果蔬菜也能分储，鲜润加倍，干区久存不易返潮，营养如初。
                            </p>
                        </div>
                    </div>
                </div>

                <div class="show_three show_five">
                    <div class="show-wrapper">
                        <div class="show-text">
                            <h1>
                                臻彩晶釉蓝<br>灵动光影
                            </h1>
                            <p>
                                汲取景泰蓝珐琅釉灵感，打造智慧科技的蓝色釉彩，深邃神秘不显沉闷，光与影的结合，彰显令人沉浸的视觉魅力。
                            </p>
                        </div>
                        <div class="show-img">
                            <div class="bg">

                            </div>
                            <img src="assets/images/show5.png" alt="">
                        </div>
                    </div>
                </div>
            </div>

            <!-- 相关产品 -->
            <div class="more">
                <ul class="clear">
                    <li>相似产品</li>
                    <li>周边产品</li>
                    <li>猜你喜欢</li>
                </ul>

                <div class="more-list">
                    <i class="iconfont icon-arrow-left"></i>
                    <div class="list-wrapper">
                        <ul>
                            <li>
                                <a href="#"><img src="assets/images/morelist1.png" alt=""></a> 
                                <p>558升风冷变频多门冰箱</p>
                                <p>BCD-558WSGKU1</p>
                            </li>
                            <li>
                                <a href="#"><img src="assets/images/morelist1.png" alt=""></a> 
                                <p>558升风冷变频多门冰箱</p>
                                <p>BCD-558WSGKU1</p>
                            </li>
                            <li>
                                <a href="#"><img src="assets/images/morelist1.png" alt=""></a> 
                                <p>558升风冷变频多门冰箱</p>
                                <p>BCD-558WSGKU1</p>
                            </li>
                            <li>
                                <a href="#"><img src="assets/images/morelist1.png" alt=""></a> 
                                <p>558升风冷变频多门冰箱</p>
                                <p>BCD-558WSGKU1</p>
                            </li>
                            <li>
                                <a href="#"><img src="assets/images/morelist1.png" alt=""></a> 
                                <p>558升风冷变频多门冰箱</p>
                                <p>BCD-558WSGKU1</p>
                            </li>
                        </ul>
                    </div>
                <i class="iconfont icon-zuoyoujiantou-copy-copy"></i>
                </div>
            </div>
            
        </section>

        <footer>
            <div class="ft-wrapper">
                <div class="ft-list">
                    <ul>
                        <li>智慧家庭</li>
                        <li><a href="">智慧首页</a></li>
                        <li><a href="">智慧首页</a></li>
                        <li><a href="">智慧首页</a></li>
                        <li><a href="">智慧首页</a></li>
                        <li><a href="">智慧首页</a></li>
                    </ul>
                    <ul>
                        <li>个人与家用产品</li>
                        <li><a href="">冰箱</a></li>
                        <li><a href="">冰箱</a></li>
                        <li><a href="">冰箱</a></li>
                        <li><a href="">冰箱</a></li>
                        <li><a href="">冰箱</a></li>
                        <li><a href="">冰箱</a></li>
                        <li><a href="">冰箱</a></li>
                        <li><a href="">冰箱</a></li>
                        <li><a href="">冰箱</a></li>
                        <li><a href="">冰箱</a></li>
                        <li><a href="">冰箱</a></li>
                    </ul>
                    <ul>
                        <li>商用解决方案</li>
                        <li><a href="">中央空调</a></li>
                        <li><a href="">中央空调</a></li>
                        <li><a href="">中央空调</a></li>
                        <li><a href="">中央空调</a></li>
                        <li><a href="">中央空调</a></li>
                        <li><a href="">中央空调</a></li>
                        <li><a href="">中央空调</a></li>
                        <li><a href="">中央空调</a></li>
                    </ul>
                    <ul>
                        <li>购买与服务</li>
                        <li><a href="">产品导购</a></li>
                        <li><a href="">产品导购</a></li>
                        <li><a href="">产品导购</a></li>
                        <li><a href="">产品导购</a></li>
                    </ul>
                    <ul>
                        <li>关于海尔</li>
                        <li><a href="">海尔品牌</a></li>
                        <li><a href="">海尔品牌</a></li>
                        <li><a href="">海尔品牌</a></li>
                    </ul>
                    <ul>
                        <li>友情链接</li>
                        <li><a href="">智慧生活体验馆</a></li>
                        <li><a href="">智慧生活体验馆</a></li>
                        <li><a href="">智慧生活体验馆</a></li>
                        <li><a href="">智慧生活体验馆</a></li>
                    </ul>
                </div>

                <div class="ft-bottom">
                    <div class="b-left">
                        <a href="">
                            关于海尔
                        </a>
                        <span>|</span>
                        <a href="">
                            关于海尔
                        </a>
                        <span>|</span>
                        <a href="">
                            关于海尔
                        </a>
                        <span>|</span>
                        <a href="">
                            关于海尔
                        </a>
                    </div>
                    <div class="b-middle">
                        <a href="">
                            鲁ICP备09096283号-1
                        </a>
                        <span>
                            |
                        </span>
                        <span>
                            © 2000-2021 Haier.com. All rights reserved.
                        </span>
                    </div>
                    <div class="b-right">
                        <span>
                            Haier 全球网站群 · 中国
                        </span>
                        <span>
                            关注海尔
                        </span>
                        <i class="iconfont icon-weixin"></i>
                    </div>
                </div>
            </div>
        </footer>
    </body>
</html>